<template>
	<view class="wrap ">
		<u-swiper :list="slides" title name="img_url" effect3d height="320"></u-swiper>
		<u-sticky :enable="enable">
			
				<u-tabs :list="tabList" :is-scroll="false" :current="currentIndex" @change="tabChange" height="100"
					bar-width="80" class="tabs"></u-tabs>
			
		</u-sticky>
		<u-row gutter="20" justify="center" style="margin-top: 20rpx;" class="u-skeleton">
			<u-col span="6" v-for="(item,index) in goodsL" :key="index" class="goods_item ">
				
				<goods-card :goods-item="item"></goods-card>
			</u-col>

		</u-row>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF" style="z-index:99"></u-skeleton>
		<u-back-top :scroll-top="scrollTop" top="800"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: [],
				goods: [],
				slides: [],
				tabList: [
					{
					name: '默认'
				}, 
				{
					name: '销量'
				}, {
					name: '推荐',

				}, {
					name: '最新'
				}],
				page:1,
				currentIndex: 0,
				scrollTop: 0,
				loading:false,
				enable:true
			}
		},
		onLoad() {
			
			this.getIndex()
		},
		onShow(){
			this.enable=true
		},
		onHide(){
			this.enable=false
		},
		computed: {
			goodsL(){
				return this.goods.length!==0?this.goods:[{},{},{},{}]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom(){
			this.page++
			this.getIndex()
		},
		methods: {
			tabChange(index) {
				this.currentIndex = index
				this.goods=[]
				this.page=1
				this.getIndex()
			},
			async getIndex() {
				this.loading=true
				const params={
					page:this.page
				}
				if(this.currentIndex===1) params.sales=1
				if(this.currentIndex===2) params.recommend=1
				if(this.currentIndex===3) params.new=1
				const res = await this.$u.api.getIndex(params);
				
				this.loading=false
				this.categories = res.categories
				this.goods = [...this.goods,...res.goods.data]
				this.slides = res.slides
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		padding: 8rpx 30rpx;
	}
	// .goods-container{
	// 	position: relative;
	// 	z-index: -99;
	// }
	.goods_item{
		box-shadow: 0 12rpx 20rpx 0 rgba(0,0,0,.1);
		margin-bottom:20rpx ;
		
	}
</style>
